<template>
  <div>
    <div class="service_content">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px"
               label-position="top">
        <el-form-item label="选择售后类型" prop="service_id">
          <el-radio-group v-model="formData.service_id" size="medium">
            <el-radio v-for="(item, index) in service_idOptions" :key="index" :label="item.value"
                      :disabled="item.disabled">{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="formData.service_id === 1" label="货物状态" prop="good_status">
          <el-radio-group v-model="formData.good_status" size="medium">
            <el-radio v-for="(item, index) in good_statusOptions" :key="index" :label="item.value"
                      :disabled="item.disabled">{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="formData.good_status === 0" label="退款原因" prop="service_reason">
          <el-select v-model="formData.service_reason" placeholder="请选择退款原因" clearable
                     :style="{width: '100%'}">
            <el-option v-for="(item, index) in service_reason_unfinished_Options" :key="index" :label="item.label"
                       :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="formData.good_status === 1" label="退款原因" prop="service_reason">
          <el-select v-model="formData.service_reason" placeholder="请选择退款原因" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in service_reason_finished_Options" :key="index" :label="item.label"
                       :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="退款金额" prop="refund_amount">
          <el-input-number
            v-model="formData.refund_amount" controls-position="right" :min="0.01" :max="refund_amount">
          </el-input-number>
        </el-form-item>
        <el-form-item label="退款说明" prop="instructions">
          <el-input v-model="formData.instructions" type="textarea" placeholder="请输入退款说明"
                    :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="上传图片" prop="instructions_img">
          <el-upload
            ref="instructions_img"
            :file-list="instructions_imgfileList"
            :action="instructions_imgAction"
            list-type="picture-card"
            multiple
            :before-upload="instructions_imgBeforeUpload"
            :on-preview="handlePictureCardPreview"
            :on-success="handleSuccess"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip">只能上传不超过 2MB 的文件</div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item v-if="formData.service_id == 2" label="退货方式" prop="service_way">
          <el-select v-model="formData.service_way" placeholder="请选择退货方式" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in service_wayOptions" :key="index" :label="item.label"
                       :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item size="large">
          <el-button style="width: 100%" type="primary" :loading="formData.loading" round @click="submitForm">提交
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>

export default {
  name: 'serviceRefund',
  components: {},
  props: [],
  data() {
    return {
      loading: false,
      order_goods: {},
      refund_amount: 0,
      formData: {
        orderNo: this.$route.query.orderNo,
        good_id: this.$route.query.good_id,
        service_id: this.$route.query.service_id || "",
        insurance_name: '',
        good_status: 1,
        service_reason: "",
        refund_amount: 0, //退款金额
        instructions: "",
        instructions_img: "",
        evidence: null,
        service_way: "寄回至商家",
        express: 'sf213124123123',
        returnAddress: '',
        status: 0,
        store_reply: '',
      },
      rules: {
        service_id: [{
          required: true,
          message: '选择售后类型不能为空',
          trigger: 'change'
        }],
        good_status: [{
          required: true,
          message: '货物状态不能为空',
          trigger: 'change',
        }],
        service_reason: [{
          required: true,
          message: '请选择退款原因',
          trigger: 'change'
        }],
        refund_amount: [{
          required: true,
          // message: '最多￥'+this.refund_amount+'，含发货邮费￥0.00',
          trigger: 'blur'
        }],
        instructions: [{
          required: true,
          message: '请输入退款说明',
          trigger: 'blur'
        }],
        service_way: [{
          required: true,
          message: '请选择退货方式',
          trigger: 'change'
        }],
      },
      dialogImageUrl: '',
      dialogVisible: false,
      instructions_imgAction: 'http://41ix769428.zicp.vip:14704/upload/uploadImg',
      instructions_imgfileList: [],
      imgPathArr: [],
      service_idOptions: [{
        "label": "退款（无需退货）",
        "value": 1
      }, {
        "label": "退货退款",
        "value": 2
      }],
      good_statusOptions: [{
        "label": "未收到货",
        "value": 0
      }, {
        "label": "已收到货",
        "value": 1
      }],
      service_reason_unfinished_Options: [{
        "label": "不喜欢/不想要",
        "value": "不喜欢/不想要"
      }, {
        "label": "未按约定时间发货",
        "value": "未按约定时间发货"
      }, {
        "label": "无物流信息",
        "value": "无物流信息"
      }, {
        "label": "商品破损已拒收",
        "value": "商品破损已拒收"
      }],
      service_reason_finished_Options: [{
        "label": "退运费",
        "value": "退运费"
      }, {
        "label": "大小/重量与商品描述不符",
        "value": "大小/重量与商品描述不符"
      }, {
        "label": "生产日期/保质期与商品描述不符",
        "value": "生产日期/保质期与商品描述不符"
      }, {
        "label": "商品变质/发霉/有异物",
        "value": "商品变质/发霉/有异物"
      }, {
        "label": "质量问题",
        "value": "质量问题"
      }, {
        "label": "少件/漏发",
        "value": "少件/漏发"
      }, {
        "label": "包装/商品破损",
        "value": "包装/商品破损"
      }],
      service_wayOptions: [{
        "label": "寄回至商家",
        "value": "寄回至商家"
      }],
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getOrderGoodInfo()
  },
  mounted() {
  },
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
        this.getImgStr()
        // this.$axios.post('/serviceOrder/addServiceOrder', {
        this.$axios.post('/serviceOrder/addServiceOrder', {
            ...this.formData
        }).then((res) => {
          if (res.status == 200) {
            this.$message({
              message: '提交成功',
              type: 'success'
            });
            this.$router.replace({
              path: '/serviceBase/serviceDetail',
              query: {
                // id: res.id, //新增id
                'good_id': this.$route.query.good_id,
                'orderNo': this.$route.query.orderNo,
              }
            })
          } else {
            this.$message({
              message: '提交失败,请重试!',
              type: 'error'
            });
          }
        })
      })
    },
    async getOrderGoodInfo() {
      let res = await this.$axios.get('/orders/getOrderGoodByGoodIdAndOrderNo', {
        params: {
          'good_id': this.$route.query.good_id,
          'orderNo': this.$route.query.orderNo,
        }
      })
      this.order_goods = res.data
      this.formData.refund_amount = res.data.totalPrice
      this.refund_amount = res.data.totalPrice
    },
    instructions_imgBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      let isAccept = new RegExp('image/*').test(file.type)
      if (!isAccept) {
        this.$message.error('应该选择image/*类型的文件')
      }
      return isRightSize && isAccept
    },
    handleSuccess(file, fileList) {
      if (file.status === 200) {
        this.instructions_imgfileList.push(fileList)
      } else {
        //错误
      }
    },
    handleRemove(file, fileList) {
      this.instructions_imgfileList = fileList
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    getImgStr() {
      if (this.instructions_imgfileList) {
        this.imgPathArr = []
        this.instructions_imgfileList.forEach((item) => {
          this.imgPathArr.push(item.response.data)
        })
        this.formData.instructions_img = this.imgPathArr.join(",")
      }
    }
  }
}

</script>
<style scoped>

.el-upload__tip {
  line-height: 1.2;
}

</style>
